<template>
  <div class="container">
    <!-- 表头居中 -->
    <el-table
      :data="tableData"
      class="table"
      width="100%"
      :header-cell-style="{ 'text-align': 'center', 'font-weight': '600', height: '70px' }"
      :cell-style="{ 'text-align': 'center', height: '100px' }"
      @select="handleSelect"
      row-key="skuId"
      ref="multipleTable"
    >
      <el-table-column type="selection" reserve-selection width="80" />
      <el-table-column label="商品信息" >
        <template #default="scope">
          <div class="info">
            <img :src="scope.row.picture" alt="" />
            <p>{{ scope.row.name }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价" width="200">
        <template #default="scope">
          <span class="price"> ￥{{ (scope.row.price * scope.row.num).toFixed(2) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="数量" width="180">
        <template #default="scope">
          <el-input-number v-model="scope.row.num" :min="1" :max="10" />
        </template>
      </el-table-column>

      <el-table-column label="小计" width="200">
        <template #default="scope">
          <!-- 小数点两位 -->
          <span class="totlaPrice">
            ￥{{
              (scope.row.price * scope.row.num).toFixed(2) ||
              (scope.row.price * scope.row.num).toFixed(2) | numberFormat
            }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="bottom">
      <span>
        共 {{ cartStore.getTotal }} 件商品，
        已选 {{ cartStore.getSelectTotal }} 件商品，
        合计：
        <span class="totalPrice">
          ￥{{ (cartStore.getSelectTotalPrice).toFixed(2) }}
        </span>
      </span>
      <el-button type="primary">下单结算</el-button>
    </div>
  </div>
</template>

<script setup name="">
import { onMounted,nextTick, ref } from 'vue'
import { useCartStore } from '@/stores/cartStore.js'
const cartStore = useCartStore()
const tableData = ref(cartStore.getCartList)

// 获取表格引用
const multipleTable = ref(null);

// 设置表格勾选状态
const setTableSelection = () => {
  tableData.value.forEach(row => {
    if (row.selected) {
      multipleTable.value.toggleRowSelection(row, true);
    }
  });
};

const handleSelect = (selection, row) => {
  cartStore.setCart(row.skuId, { selected: !row.selected });
}

onMounted(() => {
  nextTick(() => {
    setTableSelection();
  });
});
</script>

<style scoped lang="scss">
.container {
  padding: 0 100px;
  /* width: 88%; */
  margin: 20px auto;
  .header-row {
    text-align: center;
    font-weight: 600;
  }
  .table {
    width: 100%;
    .info {
      display: flex;
      align-items: center;
      img {
        height: 100px;
      }
      p {
        font-size: 14px;
        font-weight: 600;
        margin-left: 10px;
      }
    }
    .el-input-number {
      width: 150px;
    }
    .totlaPrice {
      color: rgb(209, 0, 0);
      font-size: 16px;
    }
  }

  .bottom {
    display: flex;
    background: #fff;
    margin-top: 20px;
    padding: 10px 50px;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    .totalPrice {

      color: rgb(209, 0, 0);
      font-size: 16px;
      font-weight: bold;
    }

  }
}
</style>
